<template>
  <div class="block">
    <!--<el-timeline>-->
      <!--<el-timeline-item placement="top">-->
        <!--<div slot="timestamp">{{created}}</div>-->
        <!--<el-card>-->
          <!--<h4>创建账号</h4>-->
          <!--<p>账号创建于 {{created}}</p>-->
        <!--</el-card>-->
      <!--</el-timeline-item>-->
      <!--<el-timeline-item timestamp="2018/4/3" placement="top">-->
        <!--<el-card>-->
          <!--<h4>更新 Github 模板</h4>-->
          <!--<p>王小虎 提交于 2018/4/3 20:46</p>-->
        <!--</el-card>-->
      <!--</el-timeline-item>-->
      <!--<el-timeline-item timestamp="2018/4/2" placement="top">-->
        <!--<el-card>-->
          <!--<h4>更新 Github 模板</h4>-->
          <!--<p>王小虎 提交于 2018/4/2 20:46</p>-->
        <!--</el-card>-->
      <!--</el-timeline-item>-->
    <!--</el-timeline>-->
    <div style="margin-bottom: -100px;margin-left: 50px" class="component-item">
      <pan-thumb width="100px" height="100px" :image="userAuthorityDto.authUser.imgUrl">
        {{userAuthorityDto.authUser.username}} - 若兮管理员
      </pan-thumb>
    </div>
    <vue-particles
        color="6495ED"
        :particleOpacity="0.5"
        :particlesNumber="120"
        shapeType="star"
        :particleSize="4"
        linesColor="#FFFFFF"
        :linesWidth="2"
        :lineLinked="false"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="cash"
    >
    </vue-particles>
    <center>
      <div>
    <el-card style="margin-top: -490px;margin-bottom: 20px;background-color: rgba(135,232,220,0.5)" shadow="always" class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-family: 'Bookman Old Style',serif;color: #e87064">若兮管理员 : {{userAuthorityDto.authUser.username}}</span>
        </div>
      <div class="text item">
        管理用户名 : {{userAuthorityDto.authUser.username}}
        <el-divider><i class="el-icon-sunny"></i></el-divider>
      </div>
      <div class="text item">
        手 机 号 : {{userAuthorityDto.authUser.phone}}
        <el-divider><i class="el-icon-sunny"></i></el-divider>
      </div>
      <div class="text item">
        邮 箱 : {{userAuthorityDto.authUser.email}}
        <el-divider><i class="el-icon-sunny"></i></el-divider>
      </div>
      <div class="text item">
        若兮系统职位 : <span v-for="(value, key) in userAuthorityDto.roleMap" :key="key"> {{key}}</span>
        <el-divider><i class="el-icon-sunny"></i></el-divider>
      </div>
      <div class="text item">
        职位权限描述 : <span v-for="(value, key) in userAuthorityDto.roleMap" :key="key"> {{value}}</span>
        <el-divider><i class="el-icon-sunny"></i></el-divider>
        </div>
      <div class="text item" style="height: 30px">
        <el-tooltip class="item" effect="light" content="修改信息" placement="bottom">
          <el-button style="position: relative;" @click="dialogVisible = true" type="primary" icon="el-icon-edit" circle></el-button>
        </el-tooltip>
        </div>
      <div>
        <el-dialog title="编辑信息" :visible.sync="dialogVisible">
          <el-form :model="userAuthorityDto.authUser" class="demo-ruleForm">
            <el-form-item label="用户ID" :label-width="formLabelWidth">
              <el-input v-model="userAuthorityDto.authUser.id" autocomplete="off" :disabled="true" readonly></el-input>
            </el-form-item>
            <el-form-item label="用户名" :label-width="formLabelWidth" >
              <el-input v-model="userAuthorityDto.authUser.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" >
              <el-input type="password" v-model="userAuthorityDto.authUser.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="userAuthorityDto.authUser.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth" >
              <el-input v-model="userAuthorityDto.authUser.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="success">取 消</el-button>
            <el-button type="danger">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
      </div>
    </center>
  </div>
</template>

<script>
	import PanThumb from '@/components/PanThumb'
	export default {
		name: "index",
		components: {
			PanThumb
		},
		data(){
			return {
				dialogVisible: false,
				formLabelWidth: '120px',
				userAuthorityDto:{
					authUser: {
						id: 0,
						username: '',
						password: '',
						phone: '',
						email: '',
						created: '',
						updated: '',
            imgUrl: ''
          },
					roleMap: new Map()
        }
			}
		},
		created(){
      this.userAuthorityDto.roleMap = JSON.parse(sessionStorage.getItem('username')).roleMap
			this.userAuthorityDto.authUser = JSON.parse(sessionStorage.getItem('username')).authUser
			},
    methods: {
			test1(){
				const vm = this
				vm.dialogVisible = true
      }
    }
	}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
